<script setup>
import {useRouter,useRoute} from "vue-router";
import {ref, onMounted} from "vue";
import MenuBar from '../components/MenuBar.vue'
import {getCompete} from "@/apis/compete";
import {ChatDotRound, Pointer, CircleClose, Select, CloseBold} from '@element-plus/icons-vue'

const route = useRoute()
const activeIndex = ref('1')
const evaluate = ref(1)
const handleSelect = () => {

}
const dialogVisible = ref(false)
const tableData = ref([
]);
const toggleLike = () => {
    evaluate.value = evaluate.value === 1 ? -1 : 1;
    console.log(evaluate.value)
};
onMounted(async () =>{
    try {
        const keyword = route.params.keyword
        console.log(keyword);
        const response = await getCompete({keyword: keyword})
        tableData.value = response.data
        console.log(tableData.value)
    } catch (e){
        console.error(e)
    }
})
// const tableColumns = ref([
//   { label: '竞争关键词', prop: 'competeWord' },
//   { label: '词频', prop: 'tf' },
//   { label: '竞争度', prop: 'competeValue' },
// ]);
</script>
<template>
    <TopBar />
    <div class="mainDomain">
  <div style="{height: 10%;width:100%;margin-top: 60px;}">
    <MenuBar/>
  </div>
  <el-scrollbar >
  <div class="resultPage">
    <div class="competeTable">
      <div style="{width: 100%;height: 60px;}">
        <el-text :style="{fontSize:'larger',color:'white',position:'absolute',margin: '0 45%',top:'6%'}">竞争关键词</el-text>
      </div>
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%;height:480px;border-radius: 20px;" :default-sort="{ prop: 'competeValue', order: 'descending' }">
          <el-table-column  align="center" key="competeWord" label="竞争关键词" prop="competeWord"></el-table-column>
          <el-table-column  align="center" key="competeValue" label="竞争度" prop="competeValue" sortable></el-table-column>
          <el-table-column  align="center" key="tf" label="词频" prop="tf"></el-table-column>
          <el-table-column fixed="right" label="反馈" width="120">
          <el-button type="primary" :icon="ChatDotRound" @click="dialogVisible = true"></el-button>
          </el-table-column>
        </el-table>
      </el-scrollbar>

        <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable center destroy-on-close>
            <span>你喜欢这个结果吗？</span>
            <el-button size="large" @click="toggleLike" v-if="evaluate.value === 1">
                <el-icon ><Select /></el-icon>
            </el-button>
            <el-button size="large" @click="toggleLike" v-if="evaluate.value === -1">
                <el-icon ><CloseBold /></el-icon>
            </el-button>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
            </template>
        </el-dialog>
    </div>
    <div style="height: 100px"></div>
  </div>
  </el-scrollbar>
    </div>
</template>

<style scoped>
.mainDomain{
    height:100%;
    width:100%;
    position:fixed;
    background-image: url("../assets/login-background.png");
    background-size: 100% 100%;
}
.resultPage{
  width: 100%;
  height: 100%;
  /*background-size: 100% 100%;*/
  /*background: url("../assets/background.jpg") no-repeat;*/
  /*background-position: center;*/
}
.mediationTable{
  position: relative;
  width:70%;
  height: 60%;
  top:10%;
  left:15%;
}
.competeTable{
  position: relative;
  width:70%;
  height: 60%;
  top:10%;
  left:15%;
}
</style>
